<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>血糖记录管理系统</title>
	<style scoped lang="less">
		.bubble-border {
			width: 80%;
			height: 100px;
			border-radius: 10px;
			background-color: #ffffff;
			border: 1px solid #2485e9;
			position: relative;
			margin-left: 10%;

			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			line-height: 30px;
			padding: 15px;
		}

		.bubble-border::before,
		.bubble-border::after {
			position: absolute;
			top: 40px;
			left: -20px;
			content: '';
			width: 0;
			height: 0;
			border-right: 10px solid #2485e9;
			border-bottom: 10px solid transparent;
			border-left: 10px solid transparent;
			border-top: 10px solid transparent;
		}

		.bubble-border::after {
			left: -19px;
			border-right: 10px solid #ffffff;
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<van-row>
			<van-col span="8"  class="bubble-border">今日建议：{{suggest}}</van-col>
		</van-row>
		<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">食物分类</van-divider>
		<van-row style="margin-top:15px">
			<van-grid :gutter="10" square clickable>
				<van-grid-item v-for="(type, index) in types" :key="index" @click="gridCilck(type.typeId)">
					<div slot="icon">
						<van-image class="van-grid-item__icon" round width="3rem" height="3rem" :src="type.typeIcon" />
					</div>
					<div slot="text" style="font-size: 14px;">{{type.typeTitle}}</div>
				</van-grid-item>
			</van-grid>
		</van-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		types: [],
		query: {

		},
		suggest: "无"
	}
	let vueComputed = {

	}
	let vueMethods = {
		gridCilck(id) {
			console.log(id)
			window.location.href = '/user/food/?tid=' + id
		},
		getTypes() {
			let that = this
			let pp = {

			}
			postRequst('/getTypes', pp, true).then(function (resp) {
				that.types = resp.rows
			})
		},
		getSuggestOne() {
			let that = this
			postRequst('/getSuggestOne', {}, true).then(function (resp) {
				if(resp){
					that.suggest = resp.suggestText
				}
			})
		},
	}
	function vueCreated() {
		let that = this
		that.getTypes()
		that.getSuggestOne()
	}
</script>

</html>